<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--
Bootstrap 的网格系统是用flexbox构建的,页面最多允许12列
网格类 网格系统提供6个类
.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768px)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
.col-xl- (超大型设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (特大型设备 - 屏幕宽度等于或大于 1400px)

tcp/ip 是针对因特网的通信协议
通信协议是计算机必须遵守的规则的描述,只有遵守这些规则,才能通信
TCP/IP 是供已连接因特网的计算机进行通信的通信协议。

TCP/IP 指传输控制协议/网际协议 (Transmission Control Protocol / Internet Protocol)。

TCP/IP 定义了电子设备（比如计算机）如何连入因特网，以及数据如何在它们之间传输的标准。

在 TCP/IP 中包含一系列用于处理数据通信的协议：

  TCP (传输控制协议) - 应用程序之间通信
  UDP (用户数据包协议) - 应用程序之间的简单通信
  IP (网际协议) - 计算机之间的通信
  ICMP (因特网消息控制协议) - 针对错误和状态
  DHCP (动态主机配置协议) - 针对动态寻址
TCP 使用固定的连接
TCP 用于应用程序之间的通信。

当应用程序希望通过 TCP 与另一个应用程序通信时，它会发送一个通信请求。这个请求必须被送到一个确切的地址。在双方“握手”之后，TCP 将在两个应用程序之间建立一个全双工 (full-duplex) 的通信。

这个全双工的通信将占用两个计算机之间的通信线路，直到它被一方或双方关闭为止。

UDP 和 TCP 很相似，但是更简单，同时可靠性低于 TCP。

IP 是无连接的
IP 用于计算机之间的通信。

IP 是无连接的通信协议。它不会占用两个正在通信的计算机之间的通信线路。这样，IP 就降低了对网络线路的需求。每条线可以同时满足许多不同的计算机之间的通信需要。

通过 IP，消息（或者其他数据）被分割为小的独立的包，并通过因特网在计算机之间传送。

IP 负责将每个包路由至它的目的地。

IP 路由器
当一个 IP 包从一台计算机被发送，它会到达一个 IP 路由器。

IP 路由器负责将这个包路由至它的目的地，直接地或者通过其他的路由器。

在一个相同的通信中，一个包所经由的路径可能会和其他的包不同。而路由器负责根据通信量、网络中的错误或者其他参数来进行正确地寻址。

TCP/IP
TCP/IP 意味着 TCP 和 IP 在一起协同工作。

TCP 负责应用软件（比如你的浏览器）和网络软件之间的通信。

IP 负责计算机之间的通信。

TCP 负责将数据分割并装入 IP 包，然后在它们到达的时候重新组合它们。

IP 负责将包发送至接受者
TCP/IP 使用 32 个比特或者 4 个 0 到 255 之间的数字来为计算机编址。
IP地址
每个计算机必须有一个 IP 地址才能够连入因特网。
每个 IP 包必须有一个地址才能够发送到另一台计算机。

IP 地址包含 4 个数字：
这是你的 IP 地址：219.133.170.253
TCP/IP 使用 4 个数字来为计算机编址。每个计算机必须有一个唯一的 4 个数字的地址。
数字在 0 到 255 之间，并由点号隔开，像这样：192.168.1.60

TCP - 传输控制协议
TCP 用于从应用程序到网络的数据传输控制。
TCP 负责在数据传送之前将它们分割为 IP 包，然后在它们到达的时候将它们重组。


-->
<body>
<div>
  <h1>基本网格结构</h1>
  <p>第一个例子：创建一行（div class = "row">）。然后，添加所需数量的列（带有 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表一个数字，每行加起来应为 12。</p>
<!--  控制列宽 以及它们在不同设备上的显示方式-->
  <div class="row">
    <div class="col-sm-6 bg-primary text-white">50%</div>
    <div class="col-sm-6 bg-dark text-white">50%</div>
  </div>
  <br>
  <div class="row">
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
    <div class="col-sm-4 bg-dark text-white">33.33%</div>
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
  </div>
  <br>
<!--  让Bootstrap自动布局-->
  <div class="row">
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
  </div>
  <br>
  <div class="row">
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
  </div>
  <p>第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，来创建等宽的列：两个 "col" 元素 = 每个列的 50% 宽度，而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。</p>
</div>
<br>
<div class="p-5 bg-primary text-white text-center">
  <h1>我的第一个Bootstrap5页面</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">活动</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">链接</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">链接</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h2>关于我</h2>
      <h5>我的照片: </h5>
      <div class="fakeimg">图片</div>
      <p>一些文本,一些文本,一些文本,一些文本</p>
      <h3 class="mt-4">一些链接</h3>
      <p>一些文本,一些文本,一些文本,一些文本</p>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link active">活动</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">链接</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">链接</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled">禁用</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>标题</h2>
      <h5>标题说明，2021 年 12 月 20 日</h5>
      <div class="fakeimg">图片</div>
      <p>一些文本 ..</p>
      <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>

      <h2 class="mt-5">标题</h2>
      <h5>标题说明，2021 年 12 月 21 日</h5>
      <div class="fakeimg">图片</div>
      <p>一些文本 ..</p>
      <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
    </div>
  </div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
  <p>页脚</p>
</div>
</body>
</html>
